<template>
  <div>
    <vMap @parameters="parameters"></vMap>
    <vHistogram ref="mychild" :datass="datass" :allLevelList="allLevelList" @histograms="histograms"></vHistogram>
    <el-dialog
      title="医院"
      :visible.sync="dialogVisible"
      width="60%">
      <el-table :data="tableData" border style="width: 100%;margin-top: 20px">
        <el-table-column label="医院名称" prop="showName"></el-table-column>
        <el-table-column
          label="评级"
          prop="grade"
          :filters="[{ text: '无', value: '无' },{ text: '甲等', value: '甲等' }, { text: '乙等', value: '乙等' }, { text: '丙等', value: '丙等' }]"
          :filter-method="filterGrade"
          filter-placement="bottom-end"
        ></el-table-column>
        <el-table-column
          label="等级"
          prop="level"
          :filters="[{ text: '无', value: '无' },{ text: '三级', value: '三级' }, { text: '二级', value: '二级' }, { text: '一级', value: '一级' }]"
          :filter-method="filterLevel"
          filter-placement="bottom-end"
        ></el-table-column>
        <el-table-column label="省" prop="province"></el-table-column>
        <el-table-column label="市" prop="city"></el-table-column>
      </el-table>
      <div style="text-align: center" v-if="isRouterAlive">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import vMap from '../element/map';
  import vHistogram from '../element/histogram';
  import paging from '../element/page';

  export default {
    components: {
      vMap, vHistogram, paging
    },
    data() {
      return {
        /*刷新组件*/
        isRouterAlive: true,
        /*URL*/
        URL: this.$com.Url,
        /*医院*/
        dialogVisible: false,
        tableData: [],
        allLevelList: [],
        datass: {},
        all: 1,
      }
    },
    methods: {
      /*刷新组件*/
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(() => (this.isRouterAlive = true))
      },
      /*分页*/
      returnValue(data) {
        this.get(this.URL + '/huimei/hco/hcomdm/hosinfo_province/', this.datass.name, data)
      },
      /*点击地图获取省份*/
      parameters(data) {
        let _this = this;
        if (data.name == '内蒙古') {
          data.name = '内蒙'
        }
        this.datass = data;
        this.GET(data.name);
      },
      GET(name) {
        let _this = this;
        this.$axios({
          method: 'GET',
          url: this.URL + '/huimei/hco/hcomdm/hco_level/' + name,
        }).then((res) => {
          if (res.data.code == 200) {
            this.allLevelList = res.data.data.result;
            setTimeout(() => {
              this.$refs.mychild.histogram()
            }, 100);
          }
        })
      },
      /*柱状图点击事件*/
      histograms(data) {
        if (data) {
          this.dialogVisible = true;
        }
        this.reload();
        this.get(this.URL + '/huimei/hco/hcomdm/hosinfo_province/', this.datass.name, 1)
      },
      /*表格数据*/
      get(URL, name, page) {
        this.$axios({
          method: 'GET',
          url: URL + name + '?page=' + page,
        }).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data.result[0].total % 20 > 0) {
              this.all = parseInt(res.data.data.result[0].total / 20) + 1
            } else {
              this.all = parseInt(res.data.data.result[0].total / 20)
            }
            this.tableData = res.data.data.result
          }
        });
      },
      /*过滤条件*/
      filterGrade(value, row) {
        return row.grade === value;
      },
      filterLevel(value, row) {
        return row.level === value;
      },

    },

  }
</script>

<style scoped>

</style>
